<html>
<head>
<style>
#streams {
	height:100%;
	width:1000%;
}

#streams div.stream-container {
	height:400px;
	width:200px;
	float:left;
	margin:10px;
}

#streams div.waiting {
	background-color:#99ccff;
}

#streams div.stream-container img {
	width:40px;
}

#streams div.stream-container span {
	width:160px;
}

#streams div.stream-container div.stream {
	overflow:auto;
	height:300px;
}

*.hidden {
	visibility:hidden;
}

*.banned {
	text-decoration:line-through;
}

</style>

<script src="http://www.feedgraph.com/js/feedgraph.js"></script>
<script src="party.js"></script>
<script src="temper.js"></script>

<script>

/* templates */
temper.include("templates/chat.html");
temper.include("templates/twitter.html");
var chatItem = temper.script("chat-item");
var chatStream = temper.script("chat-stream");
var twitterUser = temper.script("twitter-user");

var signedInWatcher = null;

function onChatToMe(obj) {

	var from = obj.User;
	var target = obj.Target;

	if (!from || !target) return;

	var id = from;

	if (from == "SternReuben") id = target;

	addStream(id);

	chatItem.append(id, obj);

	var stream = document.getElementById(id);

	if (from == "SternReuben") stream.className = "stream";
	else stream.className = "stream waiting";

		
	stream.scrollTop = stream.scrollHeight;
}

function resetBannedUsers() {

	feedgraph.postobj("/party/BANNED/users", {});

	reloadUsers();
}

function reloadUsers() {

	document.getElementById("SIGNEDIN-stream").innerHTML = "";
	users = {};

	signedInWatcher.restart();
}

function banUser(user) {

	bannedUsers[user] = !bannedUsers[user];
	

	feedgraph.postobj("/party/BANNED/users", bannedUsers);

	reloadUsers();
}

function init() {

	document.getElementById("reset-bans").addEventListener("click", resetBannedUsers);
	document.getElementById("ban-specific-user").addEventListener("change", function (e) {
		banUser(e.target.value);
		e.target.value = "";
	});

	watchBannedUsers();
	registerChatHandler("SternReuben", onChatToMe);
	signedInWatcher = registerSignedInHandler(onSignedIn);
}

var users = {};

function onSignedIn(user) {

	if (users[user.screenName] != true) {
		twitterUser.append("SIGNEDIN-stream", user);

		document.getElementById("ban-" + user.screenName).addEventListener("click", function () {
			banUser(user.screenName);
		});

		if (bannedUsers[user.screenName]) {
			document.getElementById("signed-in-" + user.screenName).className="banned";
		}
	}

	users[user.screenName] = true;
}

function onCloseChat(e) {

	var target = e.target.getAttribute("user");

	document.getElementById("container-" + target).className="hidden";
}

function onSendChat(e) {

	var target = e.target.getAttribute("user");

	console.log(target);

	chatTo("SternReuben", target, e.currentTarget.value);

	e.target.value = "";
	
	document.getElementById(id).className = "stream";	
}

function addStream(from) {

	var container = document.getElementById("container-" + from);
	if (container != null) {
		container.className="stream-container";
		return;
	}

	chatStream.append("streams", {"from":from});

	document.getElementById("input-" + from).addEventListener("change", onSendChat);
	document.getElementById("close-" + from).addEventListener("click", onCloseChat);
}

</script>

</head>
<body onload=init()>
<div id=streams class=streams>
<div id=SIGNEDIN class=stream-container>
	<button id=reset-bans>reset bans</button>
	<label>ban user:</label><input type=text id=ban-specific-user />
	<h2>current users</h2>
	<div id=SIGNEDIN-stream class=stream></div>
</div>
</div>
</body>
</html>
